#wizard {

	#content {
		padding: 0 0 40px;

		.content-wrapper {
			margin-top: 0;
		}
	}

	.header {
		padding: 11px 0 9px 0;
		background: #5A6474;
		font-family: $helvetica;
		text-align: center;
		box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.15);

		.sidebar-toggler {
			position: absolute;
			color: #fff;
			padding: 15px;
			top: 3px;
			z-index: 99;
			left: 8px;
			cursor: pointer;

			i {
				font-size: 37px;
			}
		}

		.steps {
			width: 79%;
			margin: 0 auto;
			border-radius: 2px 2px 0 0;

			.step {
				width: 25%;
				float: left;
				padding-top: 20px;
				padding-bottom: 20px;
				text-align: center;
				color: #f5f5f5;
				text-shadow: 1px 1px rgba(0, 0, 0, 0.05);
				position: relative;
				font-size: 13px;
				font-weight: 500;

				@media (max-width: $maxSmall) {
					width: 100%;
					padding: 10px 0;
				}

				&.active {
					span {
						background: #94A1B8;
					}
				}

				&:after {
					content: '';
					position: absolute;
					bottom: 31px;
					left: 55%;
					display: block;
					height: 2px;
					background: #94A1B8;
					width: 100%;

					@media (max-width: $maxMedium) {
						left: 57%;
					}

					@media (max-width: $maxSmall) {
						display: none;
					}
				}

				&:last-child {
					&:after {
						display: none;
					}
				}

				span {
					width: 23px;
					height: 23px;
					display: block;
					position: relative;
					margin: 0 auto;
					margin-top: 13px;
					border-radius: 25px;
					background: #5A6474;
					border: 2px solid #94A1B8;

					@include transition(all .2s linear);

					@media (max-width: $maxSmall) {
						position: absolute;
						top: 0;
						right: 0;
						width: 15px;
						height: 15px;
					}
				}
			}
		}
	}

	.form-wizard {
		background: #fff;
		margin: 0 auto;
		margin-top: 42px;
		width: 65%;
		position: relative;

		@media (max-width: $maxSmall) {
			width: 84%;
		}

		.step {
			opacity: 0;
			position: absolute;
			width: 100%;
			
			&.active {
				opacity: 1;
				z-index: 3;
			}

			.form-group {
				margin-bottom: 21px;

				.column {
					width: 30%;
					float: left;

					@media (max-width: $maxSmall) {
						width: 100%;
						margin-bottom: 20px;
					}
				}
			}

			/* step 2 avatar display */
			.display-field {
				margin-top: 6px;

				.display {
					float: left;
					background: #eeeeee;
					width: 100px;
					height: 100px;
					display: table;
					text-align: center;
					
					span {
						color: #9B9B9B;
						font-weight: bold;
						font-family: $helvetica;
						font-size: 13px;
						display: table-cell;
						vertical-align: middle;
					}
				}

				input {
					float: left;
					margin-top: 30px;
					margin-left: 20px;
				}
			}

			/* step 3 expiration date inputs */
			.expiration-field {
				width: 63% !important;

				input {
					width: 48%;
					float: left;

					&:last-child {
						float: right;
					}
				}
			}

			/* final step success */
			.success {
				text-align: center;

				.ion-checkmark-circled {
					font-size: 47px;
					color: #3DA838;
				}
				
				h3 {
					margin-top: 25px;
					font-size: 21px;
					color: #556579;
				}

				.button {
					margin-top: 40px;
				}
			}

			.form-actions {
				margin-top: 40px;
				text-align: center;

				.button {
					margin: 0 10px;
				}
			}
		}
	}

}



